<template>

  <div class="lin_ConsumerPullDown" @mouseleave="hideConsumer()">
    <div class="lin_ConsumerPullDown_list">
      <div class="lin_ConsumerPullDown_up" >
        <div class="lin_ConsumerPullDown_list_up">
          <a style="position: absolute; top: 20px;">360 Cameras</a>
          <el-button style="top: 15px; left: 100px;" @click="More">ShowHide</el-button>
          <ul >
            <li >
              <a href="#">
                <img src="https://res.insta360.com/static/9c2f1bd9ec75871a9c7190502fbf986e/x3.png">
                <span>X3</span>
              </a>
            </li>
            <li>
              <a href="#">
                <img src="https://res.insta360.com/static/3ae8ec8765d1b414accacaa8112beaac/oners.png">
                <span style="left: 50px;">ONE RS</span>
              </a>
            </li>
            <li>
              <a href="#">
                <img src="https://res.insta360.com/static/30bb0f2998e7cb24b20b2f78be9f57c1/oners-1inch-360.png">
                <span style="left: 50px;">ONE RS</span>
              </a>
            </li>
            <li>
              <a href="#">
                <img src="https://res.insta360.com/static/ad37fa7db81f416e7a477c49173ff583/x2.png">
                <span>X2</span>
              </a>
            </li>
            <li>
              <a href="#">
                <img src="https://res.insta360.com/static/b4b81eefcca2d8c0f512d58ca2f0fb73/sphere.png">
                <span>Sphere</span>
              </a>
            </li>
            <li>
              <a href="#">
                <img src="https://res.insta360.com/static/569a5676efd2f72a2f82aa211f41cd4c/acc-consumer.png">
                <span style="left: 45px;">Accessories</span>
              </a>
            </li>
          </ul>
        </div>
      </div>

      <div class="lin_ConsumerPullDown_list_down" style="top: -60px" v-show="moreproduct">
        <ul>
          <li>
            <a href="#">
                <img src="https://res.insta360.com/static/3d52b3089e94cc22e8fd0310218ff126/oner-twin.png">
                <span style="left: 55px;">ONE R</span>
              </a>
          </li>
          <li>
            <a href="#">
                <img src="https://res.insta360.com/static/f58f893529afed576ecf3289eeb9d823/onex.png">
                <span style="left: 55px;">ONE R</span>
              </a>
          </li>
          <li>
            <a href="#">
                <img src="https://res.insta360.com/static/dc43c57ae757f00637081cb8782f7f57/evo.png">
                <span style="left: 55px;">NVE</span>
              </a>
          </li>
        </ul>
      </div>

      <div class="lin_ConsumerPullDown_down" style="top: -20px">
        <div class="lin_ConsumerPullDown_list_up">
          <a style="position: absolute; top: 20px;">Action Cameras</a>
          <ul>
            <li>
              <a href="#">
                <img src="https://res.insta360.com/static/962974bf1ae08de6bd17e06897a1a967/GO3%20%E5%8D%95%E7%9B%B8%E6%9C%BA.png">
                <span>GO 3</span>
              </a>
            </li>
            <li>
              <a href="#">
                <img src="https://res.insta360.com/static/a7e1e6632afa8dc15821776d712a352f/acepro&ace.png">
                <span style="left: 40px;">Ace Pro & Ace</span>
              </a>
            </li>
            <li>
              <a href="#">
                <img src="https://res.insta360.com/static/2e8f7c570fad692a0d06d26fe706ad2d/flow.png">
                <span>Flow</span>
              </a>
            </li>
            <li>
              <a href="#">
                <img src="https://res.insta360.com/static/4d1ccdc64d4d68cea5ba57547f0eabc8/link.png">
                <span>Link</span>
              </a>
            </li>

          </ul>
        </div>
      </div>
    </div>
  </div>

</template>


<script lang="ts">
import { Insta360ScrapyIndexImg} from '@/api/api'

export default defineComponent({
  setup(){
    const data = reactive({
      Insta360ScrapyIndexImgData: ref(),
      moreproduct: ref(false),
      Timeout: ref(),
      Event: ref()
    })


    Insta360ScrapyIndexImg('').then((res: any) => {
        data.Insta360ScrapyIndexImgData = res._rawValue.title
      }).catch((err: any) => {
        console.log(err, '请求失败')
      })

      const getItemUrl = (index: any) => {
        // 根据索引获取指定项的 url
        return data.Insta360ScrapyIndexImgData[index].url;
      }


      const More = () => {
        data.moreproduct = true
      }


      const hideConsumer = () => {
        return setTimeout(() => {
          data.moreproduct = false;
        }, 1000);
      }



    return{
      ...toRefs(data),
      getItemUrl,
      More,
      hideConsumer

    }
  }
})

</script>


<style scoped>

* {
  color: black;
}

.lin_ConsumerPullDown {
  position: relative;
  width: 100%;
  height: 100%;
  background: rgb(255, 255, 255);
  text-align: start;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 阴影效果，可以根据需要进行调整 */
  transition: all 0.3s;
}

.lin_ConsumerPullDown_list {
  display: grid;
  grid-template-columns: repeat(1, 6fr);
  grid-template-rows: auto;
  transition: all .3s ease;
  padding: 0 300px;
  padding-bottom: 50px;
}

.lin_ConsumerPullDown_list_up ul,
.lin_ConsumerPullDown_list_down ul{
  position: relative;
  display: flex;
  justify-content: start;
  align-items: start;
}



.lin_ConsumerPullDown_list_up ul li,
.lin_ConsumerPullDown_list_down ul li {
  height: 200px;
  width: 180px;
  background-color: #f2f2f2;
  margin-left: 30px;
  margin-top: 50px;
  text-align: center;
}


.lin_ConsumerPullDown_list img {
  height: 140px;
  text-align: center;
  align-items: center;
  margin-top: 20px
}


.lin_ConsumerPullDown_list img:hover {
  transform: translateY(-10px);
}

.lin_ConsumerPullDown_list span {
  position: absolute;
  bottom: -10px;
  left: 60px;
  font-size: 12px;
}






</style>